9.04. Графика
Графика (Paint → Tux Paint → простой вектор в Inkscape)
Как рисовать
Что такое ластик
Как отменять нарисованное
Как сделать прозрачную картинку
Размер и разрешение картинок
Форматы картинок
Как сохранить и изменить картинку
Правила работы с картинками
Добавить mermaid схему
Добавить задачи
Представь, что ты хочешь нарисовать домик. Ты берёшь лист бумаги, карандаш — и начинаешь: сначала квадрат, потом треугольная крыша, окно, дверь… А теперь представь: а что, если этот лист — не бумага, а экран компьютера? Как тогда рисовать? И как компьютер «помнит» твой рисунок?
Вот об этом и пойдёт речь в этой главе: о компьютерной графике — науке и практике создания изображений с помощью компьютера. Это не магия. Это — точные правила, инструменты и немного воображения. И начнём мы с самого простого: с точек.
🔲 Из чего состоит картинка? Пиксели — кирпичики изображения
Каждое изображение на экране — будь то фото кота, скриншот игры или рисунок в школьном проекте — состоит из крошечных квадратиков, которые называются пиксели (от английского picture element — «элемент изображения»).
Если сильно-сильно приблизить любую фотографию — например, в увеличительном стекле браузера — ты увидишь, что плавные линии и тени превращаются в мозаику из маленьких квадратиков разного цвета. Это и есть пиксели.
Чем больше пикселей помещается на один сантиметр экрана — тем чётче и реалистичнее выглядит картинка. Это называется разрешением (подробнее — чуть позже), но пока запомни главное:
📌 Пиксель — это самая маленькая точка, которую может нарисовать экран. Всё изображение — это упорядоченная сетка из таких точек.
Поэтому, когда ты рисуешь в программе, ты на самом деле управляешь цветом тысяч и миллионов пикселей — только не по одному (это было бы очень долго!), а сразу целыми группами, с помощью кисточек, линий, фигур и других инструментов.
🎨 Первые шаги: рисуем в Paint и Tux Paint
Самая известная и простая программа для рисования в Windows — Paint («Кисть»). В Linux и на многих школьных компьютерах часто используется Tux Paint — версия, специально созданная для детей. Обе программы работают по одному принципу: они управляют растровой графикой — то есть рисуют, закрашивая пиксели.
Что такое растровая графика?
Это способ хранения картинки как таблицы: каждая ячейка таблицы — это один пиксель, и в ней записан его цвет. Например, изображение размером 100×100 пикселей — это таблица из 10 000 ячеек. Просто? Да. Удобно для фотографий и свободного рисования? Очень. Но есть и особенности — о них позже.
🔧 Основные инструменты в Paint / Tux Paint
| Инструмент | Как выглядит | Что делает | Пример использования |
|---|---|---|---|
| Кисть | 🖌️ | Рисует след, как настоящая кисточка. Толщина и форма — настраиваемы. | Нарисовать травку, облака, контуры. |
| Карандаш | ✏️ | Тонкая чёрная (или выбранная) линия — как в тетради. | Набросать эскиз, подписать детали. |
| Ластик | 🧽 | Стирает пиксели — то есть возвращает их к фоновому цвету (часто белому). Важно: он не «удаляет» пиксель, а перекрашивает его. | Исправить ошибку, убрать лишнюю линию. |
| Заливка | 🪣 | Закрашивает всю область одного цвета вокруг точки, на которую ты кликнул. Если контур незамкнут — краска «утечёт»! | Закрасить небо, поле, крышу дома. |
| Прямоугольник / Овал | ▢ / ⚪ | Рисует геометрические фигуры. Можно с заливкой (цельные) или без (только контур). | Дом — из прямоугольников, солнце — из овала. |
| Текст | T | Добавляет надпись. Шрифт, размер, цвет — можно выбрать. | Подписать героя, написать заголовок. |
💡 Совет: перед тем как рисовать — подумай:
— Какой фон мне нужен? Белый, синий, прозрачный?
— Какой размер холста? Неудобно рисовать дом на листочке 50×50 пикселей — он просто не поместится!
— Какие цвета выбрать? Не стоит использовать 20 оттенков сразу — начни с 3–5.
↩️ Как исправить ошибку? Отмена и история действий
Даже опытные художники ошибаются. А в компьютере — тем более! Хорошая новость: ты можешь отменить почти любое действие.
- В Paint и Tux Paint есть кнопка «Назад» (часто значок ↶ или Ctrl+Z).
- Каждое нажатие отменяет последнее действие: последний штрих кистью, последнюю заливку, последнее перемещение фигуры.
- В Tux Paint даже есть «магическая палочка отмены» — весёлый значок, который анимированно «съедает» ошибку.
⚠️ Но! Отмена работает только до тех пор, пока ты не сохранил и не закрыл файл. Как только ты сохранил — история «забывается». Поэтому не спеши сохранять, если ещё экспериментируешь.
Если ты слишком много отменил — есть «Вперёд» (→ или Ctrl+Y), чтобы вернуть отменённое. Это как две кнопки: «шаг назад» и «шаг вперёд» по лестнице действий.
🌫️ Прозрачность: когда фон исчезает
Иногда хочется, чтобы на картинке не было фона. Например:
- Ты нарисовал звезду — и хочешь вставить её в презентацию, чтобы она «парила» на любом слайде.
- Или создал значок для игры — и он не должен быть в белом квадратике.
Для этого нужна прозрачность — свойство, при котором пиксель не закрашен, а «пустой». Через него виден слой, который находится под изображением.
В Paint (стандартном) прозрачность не поддерживается — там фон всегда есть (по умолчанию — белый). Но в Tux Paint и в более продвинутых программах (например, GIMP, Krita) — можно.
Как сделать прозрачную картинку в Tux Paint:
- При создании нового холста выбери опцию «Прозрачный фон» (если доступно) или начни с белого фона.
- Нарисуй свою фигуру (например, звезду).
- Перейди в меню «Экспорт» → «Сохранить как PNG».
- Обязательно отметь галочку «Сохранять прозрачность» (или «Alpha channel»).
- Сохрани.
Формат PNG — один из немногих, который умеет хранить прозрачность. А вот JPG — не умеет: он всегда добавит белый (или другой) фон.
🌟 Проверь: открой файл в браузере или в любом просмотрщике. Если вокруг звезды — серо-белая «шахматная доска» — это признак прозрачности! Это не часть картинки — это подсказка программы: «здесь ничего нет».
📏 Размер и разрешение: сколько пикселей — и зачем?
Когда ты создаёшь новый файл, тебе предлагают выбрать размер холста — например, 800×600 пикселей. Это значит: ширина — 800 пикселей, высота — 600. Всего — 480 000 пикселей.
Но не путай размер в пикселях и размер в сантиметрах!
- На одном мониторе 100 пикселей могут быть 2 см в ширину.
- На другом — 3 см.
Потому что разные экраны имеют разную плотность пикселей (PPI — pixels per inch: пикселей на дюйм).
Когда какой размер брать?
| Цель | Рекомендуемый размер (пример) | Почему |
|---|---|---|
| Рисунок для школьного сайта | 1200×800 | Поместится на экране, не будет «размытым» при увеличении. |
| Иконка для игры | 64×64 или 128×128 | Маленькая, но чёткая даже в интерфейсе. |
| Плакат или распечатка A4 | 2480×3508 при 300 DPI | Для печати нужно высокое разрешение: 300 точек на дюйм — стандарт качества. |
🔍 Разрешение — это не только «сколько пикселей», но и сколько их приходится на физическую единицу (дюйм, сантиметр).
- Экран: обычно 96–144 DPI.
- Печать: 150–300 DPI (и выше для глянца).
Чем выше DPI — тем детальнее изображение при печати. Но для экрана 300 DPI — избыточно: глаз не различит разницы.
📐 Часть 2: Векторы, форматы и правила — рисуем умно
➕ Что, если не пиксели? Знакомьтесь — векторная графика
Представь: ты нарисовал в Paint идеальный круг. А теперь решишь его увеличить в 10 раз. Что произойдёт? Круг станет «ступеньками», зубчатым, как пиксельный монстр — потому что компьютер просто растянул те же самые пиксели, не добавив новых.
А теперь представь, что ты описал круг не как набор точек, а как инструкцию:
«Нарисуй окружность с центром в точке (100, 100) и радиусом 50».
Тогда при любом увеличении компьютер просто пересчитает новые пиксели по этой формуле — и круг останется гладким. Это и есть векторная графика.
📌 Векторное изображение — это не список пикселей, а набор математических описаний: линий, кривых, фигур, цветов и их взаимного расположения.
Где используется векторная графика?
- Логотипы компаний (должны быть чёткими и на визитке, и на билборде).
- Шрифты (буквы масштабируются без потерь).
- Интерфейсы программ и игр (иконки, кнопки).
- Схемы, чертежи, карты.
Простой старт: Inkscape — дружелюбный векторный редактор
Inkscape — бесплатная, открытая программа для векторной графики. Она мощная, но для начала хватит и базовых возможностей.
🔧 Основные инструменты в Inkscape (для новичка):
| Инструмент | Что делает | Особенность |
|---|---|---|
| Выбор и перемещение (стрелка) | Перетаскивает фигуры, выделяет их. | Можно двигать, вращать, масштабировать без потерь качества. |
| Карандаш / Свободная линия | Рисует кривую от руки. | Inkscape сглаживает дрожание руки — линия становится плавной. |
| Фигуры (прямоугольник, эллипс, звезда) | Создаёт идеальные формы. | После создания можно менять: скруглять углы, делать эллипс вытянутым, добавлять лучи у звезды — всё через числа, не стирая и не перерисовывая. |
| Текст | Добавляет надпись. | Текст остаётся редактируемым: можно изменить шрифт, размер, цвет — даже через неделю. |
| Заливка и обводка | Меняет цвет внутри фигуры (заливка) и её контур (обводка). | Можно сделать обводку толщиной 0,5 пикселя — и она останется тонкой даже при 1000% увеличении. |
💡 Практическое сравнение
— В Paint: нарисовал звезду → она «заморожена» в пикселях. Изменить форму — почти невозможно.
— В Inkscape: нарисовал звезду → она осталась объектом. Ты можешь:
• изменить количество лучей (с 5 на 7),
• сделать лучи острее или тупее,
• растянуть звезду в овал — и всё это без единого артефакта.
⚠️ Но! Вектор плохо подходит для фотографий. Лицо человека — это миллионы оттенков, теней, микротекстур. Описать это формулами почти невозможно. Поэтому фото — всегда растровые (JPG, PNG), а логотипы и схемы — векторные (SVG).
📁 Форматы изображений: не все картинки одинаково полезны
Когда ты сохраняешь файл, компьютер спрашивает: «В каком формате?» Выбор здесь — не формальность. Формат определяет:
- будет ли изображение чётким при увеличении,
- поддерживает ли прозрачность,
- занимает ли много места,
- можно ли редактировать потом.
Рассмотрим основные — те, с которыми ты встретишься чаще всего.
🖼️ JPG (или JPEG) — король фотографий
-
Плюсы:
— Огромная поддержка (все браузеры, телефоны, фотоаппараты).
— Маленький размер файла (за счёт сжатия).
— Отлично передаёт плавные переходы цвета (небо, кожа, трава). -
Минусы:
— Сжатие с потерями: при сохранении часть информации удаляется навсегда. Чем сильнее сжатие — тем больше артефактов (размытость, цветные «квадратики» в тенях).
— Нет прозрачности — фон всегда есть.
— Не подходит для текста и чётких линий (они становятся «мыльными»).
✅ Используй JPG для: фото, скриншотов с играми и видео, изображений с большим количеством цветов.
🌈 PNG — мастер деталей и прозрачности
-
Плюсы:
— Сжатие без потерь: изображение остаётся точно таким же, как до сохранения.
— Поддерживает прозрачность (включая полупрозрачность — например, мягкие тени).
— Чётко передаёт линии, текст, иконки. -
Минусы:
— Файлы получаются крупнее, чем JPG (иногда в 3–5 раз).
— Не подходит для больших фото — быстро «съест» место на диске.
✅ Используй PNG для: скриншотов с интерфейсами, логотипов, иконок, рисунков с текстом, изображений с прозрачным фоном.
🌀 GIF — анимация и ограниченная палитра
-
Плюсы:
— Поддерживает простую анимацию (например, мигающая надпись, вращающийся значок).
— Маленький размер для простых изображений.
— Работает везде — даже в старых браузерах. -
Минусы:
— Только 256 цветов (из 16 миллионов!). Поэтому фото в GIF выглядят «постеризованными» — с резкими переходами.
— Прозрачность — только «да/нет», без полупрозрачности (тень будет «ступенчатой»).
— Анимация — только покадровая, без плавных переходов.
✅ Используй GIF для: коротких анимаций (до 5 сек), мемов, значков с движением, когда важна совместимость, а не качество.
📐 SVG — вектор для веба
-
Плюсы:
— Полностью векторный: масштабируется без потерь до любого размера.
— Файл — это текст (XML), а не набор пикселей. Можно открыть в Блокноте и прочитать!
— Поддерживает анимацию, интерактивность (в браузере), стили через CSS.
— Очень маленький размер для простых изображений. -
Минусы:
— Не подходит для фото.
— Сложные векторы (тысячи узлов) могут тормозить браузер.
— Требует базового понимания структуры (но рисовать можно и «вслепую» через Inkscape).
✅ Используй SVG для: логотипов на сайте, иконок интерфейса, диаграмм, схем, графиков.
🔄 Как изменить формат и размер картинки?
Ты нарисовал в Tux Paint — сохранил как PNG. А нужно — JPG для сайта. Что делать?
Способ 1: В редакторе (Paint, Inkscape, GIMP)
- Открой файл.
- Выбери Файл → Сохранить как…
- В поле «Тип файла» выбери нужный формат (JPG, PNG и т.д.).
- Для JPG — появится окно настройки качества (обычно 80–95% — хороший баланс).
- Нажми Сохранить.
Способ 2: Онлайн-конвертеры (осторожно!)
Есть сайты вроде convertio.co, cloudconvert.com — они быстро меняют формат.
⚠️ Но!
— Не загружай туда личные или приватные изображения (они могут сохраняться на сервере).
— Проверяй, нет ли в готовом файле скрытых метаданных (геолокация, имя автора — см. ниже).
Как изменить размер (уменьшить)?
- В Paint: Изменить → Размер → задай % или пиксели.
- В Inkscape: Файл → Свойства документа → поменяй размер холста или выдели объект и масштабируй его (Ctrl+колёсико мыши).
- В GIMP/Krita: Изображение → Масштабировать изображение.
💡 Совет: никогда не увеличивай маленькую картинку — она станет размытой. Лучше нарисовать заново в большем размере.
📜 Правила работы с изображениями: этика, безопасность, порядок
Рисовать — весело. Но есть правила, которые делают работу не только качественной, но и честной.
1. Авторские права — не воруй, уважай
- Изображение в Google — не значит, что оно «свободное».
- Даже если картинка без водяного знака — это не даёт права её использовать.
- Ищи свободные изображения:
• pixabay.com — всё бесплатно, без указания автора (но можно — вежливо).
• unsplash.com — качественные фото.
• openclipart.org — векторные иконки (формат SVG/PNG), общественное достояние.
✅ Правило: если не уверен — не используй. Или нарисуй сам.
2. Метаданные — что скрыто в картинке?
Цифровые фото и скриншоты часто содержат EXIF-данные:
- Дата и время съёмки,
- Модель телефона/камеры,
- Геолокация (координаты, где сделано фото!),
- Имя программы, в которой редактировали.
Это может быть опасно: например, фото школьного двора с геометкой — покажет, где находится школа.
Как очистить?
- В Paint и Tux Paint — метаданные не сохраняются (они «стереть» при сохранении).
- В Inkscape (SVG) — тоже чисто.
- Для JPG/PNG из фотоаппарата:
• Используй GIMP: Файл → Экспорт как… → сними галочку «Сохранить EXIF».
• Или онлайн-очиститель: verexif.com (проверяй и удаляй).
✅ Перед публикацией — всегда проверяй: «А что скрыто в этом файле?»
3. Безопасность: не открывай подозрительные файлы
- Файл с расширением
.exe,.bat,.scr— не картинка, даже если значок — как у фото! - Злоумышленники могут переименовать вирус в
cat.jpg.exe— и Windows, если скрыты расширения, покажет толькоcat.jpg. - Всегда включи отображение расширений:
• Проводник → Вид → Параметры → Вид → сними галочку «Скрывать расширения…».
📊 Mermaid: Как создаётся цифровое изображение
Ниже — схема, показывающая путь от замысла до готовой картинки. Её можно вставить в Markdown-файл проекта «Вселенная IT» — она отрисуется автоматически.
📝 Как читать схему:
— Жёлтый ромб — выбор пути.
— Синие блоки — растровая графика.
— Зелёные — векторная.
— Оранжевые — сохранение.
— Светло-зелёный — финальная проверка.
🧩 Практические задачи
Предлагаем три уровня сложности. Выполнять можно в любой удобной программе (Paint, Tux Paint, Inkscape). Цель — не «сделать красиво», а понять принцип.
🔹 Уровень 1 (8–10 лет): «Мой первый пиксель-арт»
Задача: Нарисуй смайлик 32×32 пикселя только квадратами — как в старых играх.
Инструкция:
- Создай холст 32×32 пикселя (в Paint: Файл → Свойства).
- Включи сетку (если есть) или вручную рисуй по 1 пикселю (карандашом 1×1).
- Используй только 3 цвета: жёлтый (фон), чёрный (глаза, рот), белый (блик в глазу).
- Сохрани как
smile.png(обязательно PNG!).
Вопросы для размышления:
— Почему мы не увеличили холст? Что будет, если нарисовать на 200×200?
— Можно ли этот смайлик увеличить в 10 раз без потерь? Почему?
🔸 Уровень 2 (11–14 лет): «Прозрачный значок для сайта»
Задача: Создай иконку «домик» с прозрачным фоном для школьного сайта.
Инструкция:
- В Tux Paint или Inkscape создай новый файл (512×512).
- Нарисуй дом: квадрат + треугольная крыша + окно.
- Убедись, что фон — прозрачный (в Tux Paint: галочка «прозрачность» при экспорте; в Inkscape — фон по умолчанию прозрачный).
- Сохрани как
home.svg(Inkscape) иhome.png(экспорт из Inkscape с прозрачностью). - Открой оба файла в браузере. Сравни: что происходит при увеличении?
Доп. задание: Вставь home.png на страницу HTML (просто <img src="home.png">). Проверь: «парит» ли домик над фоном?
🔺 Уровень 3 (14–16 лет): «Сравнительный анализ форматов»
Задача: Возьми одно изображение (например, скриншот своего рисунка) и сохрани его в 4 форматах: JPG (качество 90%), JPG (качество 30%), PNG, GIF.
Инструкция:
- Сделай скриншот рисунка (можно через
Win+Shift+S). - Сохрани в 4 вариантах.
- Сравни:
— Размер файлов (в КБ),
— Качество при 200% увеличении,
— Наличие/отсутствие прозрачности,
— Есть ли артефакты (размытость, цветные квадраты).
Выводы запиши в таблицу:
| Формат | Размер | Качество | Прозрачность | Когда использовать? |
|---|---|---|---|---|
| JPG 90% | … | … | Нет | … |
| JPG 30% | … | … | Нет | … |
| PNG | … | Отличное | Да | … |
| GIF | … | Низкое (256 цв.) | Только полная | … |
Вопросы:
— Почему GIF такой маленький, но качество ниже?
— Где бы ты использовал каждый из этих файлов в реальном проекте?